<!--
 * @Description:
 * @Author:
 * @Date: 2024-12-22 19:24:43
 * @LastEditTime: 2024-12-22 22:33:03
 * @LastEditors: XXX
-->
<template>
  <div>
    <el-dropdown>
      <svg class="icon" aria-hidden="true" font-size="45px" :class="{ 'svg-color': isWhite }">
        <use xlink:href="#iconzhongyingwen" />
      </svg>

      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="item in languages" :key="item.value" :disabled="language === item.value">
            <span @click="handleSetLanguage(item.value)">{{ item.name }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive } from 'vue';
import { useStore } from '@/store';
import { useI18n } from 'vue-i18n'
import { AppActionTypes } from '@/store/modules/app/action-types';
import { ElMessage } from 'element-plus'

type Language = {
  name: string
  value: string
}

defineProps<{ isWhite: Boolean }>()

const store = useStore()
const { locale } = useI18n()

const language = computed(() => {
  return store.state.app.language
})

const languages = reactive<Array<Language>>([
  {name: 'En', value: 'en'},
  {name: '中文', value: 'zh-cn'}
])

const handleSetLanguage = (lang: string) => {
  console.log('lang :>> ', lang);
  locale.value = lang
  store.dispatch(AppActionTypes.ACTION_SET_LANGUAGE, lang)
  ElMessage({
    message: 'Switch Language Success',
    type: 'success'
  })
}
</script>

<style lang="scss" scoped>
.svg-color{
  fill: white;
}
</style>
